<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XMLBinder - Example 3</title>
	<style type="text/css">
	
	html,body {
		background-color: #f2f2f2;
		font-family: sans-serif;
		color: #666;
	}
	body .outer {
		width: 300px;
		padding: 30px;
        margin: 0 auto;
	}

	div.name {
		font-family: cursive;
		color: black;
        padding: 10px;
        border: solid 1px #ccc;
	}

	</style>
</head>
<body onload="init()">
    
    <div class="outer">
        <p><strong>Simple example</strong>:</p>
        <div class='name' contenteditable="true"><input type='text' class='name' /></div>
        <p>You name is: <span class='name'></span></p>
    </div>

	<script type="text/javascript" src="../jquery-2.0.2.min.js"></script>
	<script type="text/javascript" src="../jssaxparser/sax.js"></script>
	<script type="text/javascript" src="../jssaxparser/DefaultHandlers.js"></script>
	<script type="text/javascript" src="../jssaxparser/AttributesImpl.js"></script>
	<script type="text/javascript" src="../jssaxparser/NamespaceSupport.js"></script>
	<script type="text/javascript" src="../parser.js"></script>
	
	<script type="text/javascript">

	var dtd = "<!DOCTYPE name [<!ELEMENT name (#PCDATA)>]>";
	var xml = "<name>[enter your name]</name>";
	var XMLBinder;

	function init() {
	    XMLBinder = $('.name').XMLBinder({dtd: dtd, xml: xml});
	}

	</script>

</body>
</html>
